<template>
  <div>
    <!--  返回按钮和标题  -->
    <div>
      <van-nav-bar
          title="朋友圈"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft()"
      />
    </div>
    <!--    2.单个讨论圈-->
    <div v-for="c in circle" id="div-friend">
      <!--      头像-->
      <div>
        <van-row>
          <van-col span="5">
            <div style="margin-top: 20px">
              <van-image
                  round
                  width="3rem"
                  height="3rem"
                  src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              />
            </div>
          </van-col>
          <!--      用户名-->
          <van-col span="10">
            <p style="margin-top: 20px;margin-bottom: 10px;text-align: left">{{ c.name }}</p>
            <p style="margin-top: 0px;text-align: left">{{c.ctime}}</p>
          </van-col>
          <!--      关注按钮-->
          <van-col span="9">
            <div style="margin-top: 20px;margin-left: 40px">
              <van-button plain type="primary" id="lookbtn">
                关注
              </van-button>
            </div>
          </van-col>
        </van-row>
      </div>
      <!--朋友圈标题暂不需要-->
      <!--      <div id="div-ft1">-->
      <!--        <P>{{ c.title }}</P>-->
      <!--      </div>-->
      <!--朋友圈内容-->
      <div id="div-ft2">
        {{ c.content }}
      </div>
    </div>
    <!--    3.评论显示-->
    <div v-for="r in remarks" id="div-remark">
      <!--      用户名-->
      <div class="pl-yhm">
        <label >{{ r.name }}:</label>
      </div>
      <div class="pl-nr"><label >{{r.content}}</label>
      </div>
      <div>
      <label class="pl-rq" >日期:{{r.ctime}}</label>
      </div>
    </div>
    <!--    4.评论输入框-->
    <div class="dv4" >
      <van-cell-group inset >
        <van-field
            v-model="remark.content"
            center
            :label="str1"
            label-width="2rem"
            clearable
            placeholder="请输入评论内容"
        >
          <template #button>
            <van-button size="small" type="primary" @click="send()">发表</van-button>
          </template>
        </van-field>
      </van-cell-group>

    </div>
  </div>

</template>

<script>
export default {
  name: "CommunityRemarkView.vue",
  data(){
    return{
      circle: [
        {
          id:"",
          //这是头像
          photo: "",
          name: "",
          //朋友圈没有标题注释
          // title: "测试标题1",
          //likenum:"测试点赞数",
          ctime:"",
          content: ""
        }
      ],
      remarks:[
        {
          cid:"",
          name:"",
          content:"暂无评论",
          ctime:""
        }
      ],
      remark:{
        cid:"",
        name:'',
        content:'',
        ctime:''
      }
    }
  }
  ,mounted(){
    //接受VueX中储存的这条热议的id信息
    this.id=this.$store.state.remarkId;
    this.remark.cid=this.id
    this.loadData();
    this.remarkData();
  }
  ,methods:{
    onClickLeft(){
      history.back()
    },
    loadData(){
      //点击之后热议详细信息的请求接口
      this.axios.get("/api/circle/queryOne.do?id="+this.id).then(r=>{
        if(r.data.code==200){
          this.circle=r.data.data;
        }
      });
    },
    remarkData(){
      //点击之后热议详细信息的请求接口
      this.axios.get("/api/remark/slectAll.do?id="+this.id).then(r=>{
        if(r.data.code==200){
          this.remarks=r.data.data;
        }else if(r.data.code==400){
          this.$toast("无评论")
        }
      });
    },

    send(){
      //请求接口 发表评论
      if(this.remark.content==''){
        this.$toast("请输入内容！！！")
      }else {
        this.axios.post("/api/remark/add.do",this.remark).then(r=>{
          if(r.data.code==200){
            //成功
            this.remark.content="";
            this.remarkData();
          }
          else {
            this.$toast(r.data.msg)
          }
        })
      }
    },
  }
}
</script>

<style scoped>
/*内容的*/
#div-ft2 {
  margin-left: 20px;
  font-size: 20px;
  text-align: left;
}
/*<!--    3.评论区->*/
/*整体的*/
#div-remark {
  width: 90%;
  margin-left:5%;
  margin-right: 5%;
  margin-top: 3%;
  border-style: solid;
  border-color: #FFC77D;
  border-radius: 10px;
  float: left;
}
.pl-yhm{
  width: 15%;
  text-align: center;
  margin:10px;
  font-size: 15px;
  font-weight: bold;
  float: left;
}
.pl-nr{
  width: 70%;
  margin:10px;
  text-align: left;
  font-size: 15px;
  font-weight: bold;
  float: left;
}
.pl-rq{
  width: 100%;
  text-align: left;
  margin-left: 20px;
  font-size: 8px;
  float: left;
}
.dv4{
  width: 94%;
  margin: 3%;
  float: left;
  height: 60px;

}
</style>
